<template>
  <a-table :columns="columns" :data-source="state.data" rowKey="balance_id" :pagination="state.pagination"
    :loading="state.loading" @change="pageChange">
  </a-table>
</template>
<script setup>
import { reactive, watch } from "vue";
import { userBalance } from "@/api/user";
const props = defineProps({
  id: {
    type: [String, Number],
    default: "",
  },
});
watch(
  () => props.id,
  (oldVal, newVal) => {
    if (newVal) loadData();
  }
);
const columns = [
  {
    title: "id",
    dataIndex: "balance_id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "当前余额",
    dataIndex: "after_value",
  },
  {
    title: "支出金额",
    dataIndex: "change_value",
  },
  {
    title: "类型",
    dataIndex: "type",
    customRender(record) {
      let type = ["", "分销", "提现", "后台操作"];
      return type[record.value];
    },
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
  },
];
const state = reactive({
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 8, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  },
  data: [],
});
const loadData = () => {
  state.loading = true;
  userBalance({
    user_id: props.id,
    ...state.searchParams,
  }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.data = res.data || [];
    }
  });
};
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  loadData();
};
loadData();
defineExpose({
  loadData,
});
</script>
<style lang="scss" scoped></style>
